<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<a href="add.html">添加</a>
<table border="1" cellspacing="0" width="100%" id="studentTable">
    <tr>
        <th>标题</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
</table>


<script>
    //网页标签加载完后会触发onload事件，调用匿名函数
    //当前访问当前网页的时候，就会触发window.onload这个事件。其实就是window对象的onload属性，
    //会执行onload对应的方法
    window.onload = function () {
        axios.get("/pages/students").then(function (resp) {
            //把发送请求后得到的响应结果赋值给students
            let students = resp.data;
            console.log(students)
            let tableData = " <tr>\n" +
                "        <th>id</th>\n" +
                "        <th>学号</th>\n" +
                "        <th>姓名</th>\n" +
                "        <th>年龄</th>\n" +
                "        <th>性别</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";
            //遍历users
            for (let i = 0; i < students.length; i++) {
                let student = students[i];
                tableData += "\n" +
                    " <tr>\n" +
                    "        <td>" + student.id + "</td>\n" +
                    "        <td>" + student.stuNo + "</td>\n" +
                    "        <td>" + student.name + "</td>\n" +
                    "        <td>" + student.age + "</td>\n" +
                    "        <td>" + student.sex + "</td>\n" +
                    "        <td><a href='#'>修改</a><a href='#'>删除</a></td>\n" +
                    "    </tr>";
            }
            //设置表格数据
            document.getElementById("studentTable").innerHTML = tableData;
        })
    }


</script>
</body>
</html>